import React, { Component } from "react"
import { Descriptions, Tooltip, InputNumber, Modal, Input, Switch } from 'antd';
import { QuestionCircleOutlined } from "@ant-design/icons";
import TheButton from '@/components/TheButton';
import { rechargeWithdrawList, rechargeWithdrawEdit } from '@/request/wallet/rechargeWithdraw'
import '../style/style.scss';
import EditInput from "./editInput";
const { TextArea } = Input;


// 入口文案label
let entryCopyLabel = (<div>
  <text style={{ marginRight: 10 }}>入口维护设置文案</text>
  <Tooltip placement="top" title={() => { return '入口关闭时展示维护文案' }}  >
    <QuestionCircleOutlined style={{ fontSize: '16px' }} />
  </Tooltip></div>)
// 入口开关label
let entrySwitchLabel = (<div>
  <text style={{ marginRight: 10 }}>入口开关</text>
  <Tooltip placement="top" title={() => { return '关闭时,APP点击提现会展示维护文案' }}  >
    <QuestionCircleOutlined style={{ fontSize: '16px' }} />
  </Tooltip></div>)
export default class Recharge extends Component {
  constructor() {
    super()
    this.state = {
      imAmountConfigId: '',//业务id
      obj: {},
      isInputChange: false,//是否修改值
      oldValue: '',//旧数据输入框
      moneyVerification: '',//金额过大时触发验证码
      isMaxMoneyFlag: false, // 是否显示验证最大金额额度
      moneyLimit: '',//触发验证的最大金额额度
      isEditSaveFlag: false, // 编辑保存显示内容标识
      otherOldValue: '',// 触发验证金额的旧数据
    }
  }
  componentDidMount() {
    this.getData()
  }
  // 获取数据
  getData = async () => {
    let res = await rechargeWithdrawList({ type: 5 })
    if (res.code === 0 && res.data) {
      let data = res.data
      this.setState({
        obj: {
          minimumAmount: {
            label: '单次提现最低金额（元）',
            key: 'minimumAmount',
            value: (data.minimumAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
          },
          maximumAmount: {
            label: '单次提现最大金额（元）',
            key: 'maximumAmount',
            value: (data.maximumAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
          },
          dayAmount: {
            label: '单日提现总额度（元）',
            key: 'dayAmount',
            value: (data.dayAmount / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
          },

          manualAuditThreshold: {
            label: '提现金额触达人工审核的额度（元）',
            key: 'manualAuditThreshold',
            value: (data.manualAuditThreshold / 100).toFixed(2),
            minValue: 0.01,
            maxValue: 999999.99,
            precision: 2,
            status: 0, //编辑 0 保存1
          },
          minutesNumber: {
            label: '1分钟内提现最大次数',
            key: 'minutesNumber',
            value: data.minutesNumber,
            minValue: 1,
            maxValue: 999,
            precision: 0,
            status: 0, //编辑 0 保存1
          },
          hourNumber: {
            label: '1小时内提现最大次数',
            key: 'hourNumber',
            value: data.hourNumber,
            minValue: 1,
            maxValue: 999,
            precision: 0,
            status: 0, //编辑 0 保存1
          },
          dayNumber: {
            label: '单日提现提最大次数',
            key: 'dayNumber',
            value: data.dayNumber,
            minValue: 1,
            maxValue: 10000,
            precision: 0,
            status: 0, //编辑 0 保存1
          },
          withdrawalServiceFee: {
            label: '提现服务费%',
            key: 'withdrawalServiceFee',
            value: data.withdrawalServiceFee,
            minValue: 0,
            maxValue: 100,
            precision: 0,
            status: 0, //编辑 0 保存1
          },
          text: {
            label: entryCopyLabel,
            key: 'text',
            value: data.text,
            status: 0, //编辑 0 保存1
            precision: 0,
          },
          entrySwitch: {
            label: entrySwitchLabel,
            key: 'entrySwitch',
            value: data.entrySwitch === 0 ? true : false,
            status: 0, //编辑 0 保存1
          },
          realnameOrNot: {
            label: '是否需要实名',
            key: 'realnameOrNot',
            value: data.realnameOrNot === 0 ? true : false,
            status: 0, //编辑 0 保存1
          },
        },
        imAmountConfigId: data.imAmountConfigId,
        moneyVerification: data.moneyVerification === 0 ? true : false,
        isMaxMoneyFlag: data.moneyVerification === 0 ? true : false,
        moneyLimit: {
          label: '触发验证的最大金额额度',
          key: 'moneyLimit',
          value: (data.moneyLimit / 100).toFixed(2),
          minValue: 0.01,
          maxValue: 999999.99,
          precision: 2,
          status: 0, //编辑 0 保存1
        },
        editType: 0
      })
    }
  };
  // 编辑 
  edit = (data) => {
    let { obj } = this.state
    let oldValue = ''
    Object.values(obj).map((v, i) => {
      if (data.index === i) {
        oldValue = v.value
        return v.status = 1
      } else {
        this.state.moneyLimit.status = 0
        return v.status = 0
      }
    })
    this.setState({
      obj,
      oldValue,
      warning: false
    })
  }
  // 取消
  cancel = (data) => {
    let { obj } = this.state
    Object.values(obj).map((v, i) => {
      if (data.index === i) {
        v.status = 0
        return v
      }

    })
    this.setState({
      obj,
      warning: false
    })
  }
  // 修改输入框的值
  valueInput = (e, index) => {
    let { obj } = this.state
    Object.values(obj).map((v, i) => {
      if (index === i) {
        if (v.key === 'text') {
          return v.value = e.target.value
        } else {
          return v.value = e
        }
      }
    })
    this.setState({
      obj,
      isInputChange: true
    })
  }
  // 保存时掉接口
  saveFn = async (params, v) => {
    let res = await rechargeWithdrawEdit({
      imAmountConfigId: this.state.imAmountConfigId, [v.key]: v.precision === 0 ? params.data.value : React.$transNum(params.data.value, 0, 2)
    })
    if (res.code === 0) {
      v.status = 0
      v.value = params.data.value
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
      return v
    }
  }
  // 保存
  save = (params) => {
    let { obj } = this.state
    let numValues = Number(params.data.value)
    Object.values(obj).map(async (v, i) => {
      if (params.index === i) {
        if (params.data.key === 'minimumAmount' && numValues >= Number(obj.maximumAmount.value)) {
          Modal.error({
            content: '单次最低金额不能大于或等于单次最高金额',
            okText: '确定'
          });
          return false
        }
        if (params.data.key === 'maximumAmount') {
          if (numValues <= Number(obj.minimumAmount.value)) {
            Modal.error({
              content: '单次最高金额不能小于或等于单次最低金额',
              okText: '确定'
            });
          } else if (numValues > Number(obj.dayAmount.value)) {
            Modal.error({
              content: '单次充值最高金额不能大于单日充值总额度',
              okText: '确定'
            });
          } else {
            this.saveFn(params, v)
          }
          return false
        }
        if (params.data.key === 'dayAmount' && numValues < Number(obj.maximumAmount.value)) {
          Modal.error({
            content: '单日充值总额度不能小于单次充值最高金额',
            okText: '确定'
          });
          return false
        }
        this.saveFn(params, v)
      }
    })
  }
  // 开关设置
  switchChange = (e, params, index) => {
    let { obj } = this.state
    let entrySwitchContent = params.value ? '关闭后，用户将不能进入提现页' : '开启后，用户可进入提现页'
    let realnameOrNotContent = params.value ? '关闭后，用户提现无需实名认证' : '开启后，用户提现需实名认证'
    Object.values(obj).map(async (v, i) => {
      let _this = this
      if (index === i) {
        Modal.confirm({
          title: '提示',
          content: v.key === 'entrySwitch' ? entrySwitchContent : realnameOrNotContent,
          okText: '确认',
          cancelText: '取消',
          async onOk() {
            let res = await rechargeWithdrawEdit({
              imAmountConfigId: _this.state.imAmountConfigId, [v.key]: e ? 0 : 1
            })
            if (res.code === 0) {
              React.$message({ type: 'success', content: v.value ? '关闭成功' : '开启成功' })
              _this.getData()
            }
          },
        });
        this.setState({ obj })
      }
    })
  }
  // 是否开启手机验证
  codeSwitchChange = async (e) => {
    let res = await rechargeWithdrawEdit({
      imAmountConfigId: this.state.imAmountConfigId, moneyVerification: e ? 0 : 1
    })
    if (res.code === 0) {
      React.$message({ type: 'success', content: !e ? '关闭成功' : '开启成功' })
      this.getData()
    }
    this.setState({
      moneyVerification: e ? 0 : 1,
      isMaxMoneyFlag: e
    })
  }
  //编辑触发验证的最大金额额度
  editMoneyLimit = () => {
    let { moneyLimit, obj } = this.state
    moneyLimit.status = 1
    let otherOldValue = ''
    Object.values(obj).map((v) => {
      otherOldValue = v.value
      v.status = 0
      return v
    })
    this.setState({
      obj,
      otherOldValue,
      moneyLimit
    })
  }
  //取消触发验证的最大金额额度
  cancelMoneyLimit = () => {
    let { moneyLimit } = this.state
    moneyLimit.status = 0
    this.setState({
      moneyLimit
    })
  }
  //保存触发验证的最大金额额度
  saveMoneyLimit = async (params) => {
    let { moneyLimit, imAmountConfigId } = this.state
    let res = await rechargeWithdrawEdit({ imAmountConfigId: imAmountConfigId, moneyLimit: React.$transNum(params.data.value, 0, 2) })
    if (res.code === 0) {
      this.setState({
        moneyLimit: {
          ...moneyLimit,
          value: params.data.value,
          status: 0
        }
      })
      React.$message({ type: 'success', content: '保存成功' })
      this.getData()
    }
  }
  // 输入框值改变
  moneyLimitInput = (e) => {
    this.setState({
      moneyLimit: e,
      isInputChange: true
    })

  }
  render() {
    const { obj, moneyVerification, isMaxMoneyFlag, moneyLimit, editType } = this.state
    let style = { display: 'flex', justifyContent: 'center', alignItems: 'center' }
    return (
      <div >
        <div className="h-title">钱包账户提现配置</div>
        <Descriptions layout="vertical" bordered column={11} size='small' labelStyle={style} style={{ width: 2050 }}>
          {
            Object.values(obj).map((item, index) => {
              return (
                <Descriptions.Item label={item.label} style={{ textAlign: (item.key === 'realnameOrNot' || item.key === 'entrySwitch') && 'center' }}>
                  {
                    item.key === 'realnameOrNot' || item.key === 'entrySwitch' ?
                      <Switch checked={item.value} onChange={(e) => this.switchChange(e, item, index)} />
                      : <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <EditInput editType={editType} editData={item} editIdex={index} onEdit={this.edit} onSave={this.save} onCancel={this.cancel} />
                      </div>
                  }
                </Descriptions.Item>
              )
            })
          }
        </Descriptions>
        <p style={{ marginTop: 20 }}>
          <strong >其他提现配置</strong>
        </p>
        <div className="phoneCode">
          <span>提现金额过大时手机验证码验证：</span>
          <Switch checked={moneyVerification} onChange={(e) => this.codeSwitchChange(e)} />
        </div>
        {
          isMaxMoneyFlag && <div className="phoneCode">
            <span> 触发验证的最大金额额度：</span>
            <EditInput editData={moneyLimit} onEdit={this.editMoneyLimit} onSave={this.saveMoneyLimit} onCancel={this.cancelMoneyLimit} />
          </div>
        }
      </div>
    )
  }
}